<template>
  <div>
    <el-table :data="data" :row-key="rowKey">
      <slot />
    </el-table>

    <el-pagination :page-size="pageSize" v-model="currentPage" layout="prev, pager, next" :total="total"
      @current-change="onPageChanged" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface PageTableProps {
  // table side
  data: any | null;
  rowKey: string | null;
  fit: boolean | true;

  // pagination side
  showPage: boolean | true;
  pageSize: number | 10;
  // indexPage: number | 1;
  total: number | 0;
}

const props = defineProps<PageTableProps>();

const currentPage = ref(1);

const emits = defineEmits(["pageChange"]);

const onPageChanged = (page) => {
  currentPage.value = page
  emits("pageChange", {
    count: props.total,
    current: currentPage.value,
    pageSize: props.pageSize,
  });
};
</script>

<style scoped lang="scss"></style>
